#include('header.html')
<script type="text/javascript">
  // 改变侧边栏激活
  changeTab(5);
</script>
<style>
	.form-group span {
		display: inline-block;
		width: 100%;
		color: red;
		text-align: center;
	}
</style>
<div class="admin-content">
	<div class="admin-box">
		<div class="col-lg-12 col-xs-12">
			<h4 style="padding-left: 15px;">系统设置</h4>
		</div>
		<div style="max-height: 480px; min-width: 310px;" class="col-lg-4 col-xs-6 col-lg-offset-4 col-xs-offset-3">
			<div class="panel panel-danger">
				<div class="panel-heading">
					<span class="">更改账号</span>
				</div>
				<div class="panel-body">
					<form class="form-horizontal" @submit.prevent="change_">
						<div class="form-group">
							<label for="name" class="text-left col-sm-3 control-label">新账号</label>
							<div class="col-sm-9">
								<input class="form-control" id="name" v-model="username" placeholder="新账号">
							</div>
							<span v-show="emptyName">账号不能为空！</span>
						</div>
						<div class="form-group">
							<label for="np1" class="text-left col-sm-3 control-label">新密码</label>
							<div class="col-sm-9">
								<input type="password" class="form-control" id="np1" v-model="password" placeholder="新密码">
							</div>
							<span v-show="emptyPass">密码不能为空！</span>
						</div>
						<div class="form-group">
							<label for="np2" class="text-left col-sm-3 control-label">确定密码</label>
							<div class="col-sm-9">
								<input type="password" class="form-control" id="np2" v-model="password1" placeholder="确定密码">
							</div>
							<span v-show="!eqPass">两次密码不相同！</span>
						</div>
						<input type="submit" value="确定修改" class="btn btn-danger btn-group-justified">
					</form>
				</div>
			</div>
		</div>
	</div>
</div>
<script>
  var mv = new Vue({
    el: '.panel-body',
    data: {
      id: '${admin.id}',
      username: '${admin.name}',
      password: '${admin.pass}',
      password1: '${admin.pass}',
      emptyName: false,
      emptyPass: false,
      eqPass: true
    },
    methods: {
      change_: function () {
        if (!this.emptyName && !this.emptyPass && this.eqPass) {
          $.post('/admin/change', {id: this.id, name: this.username,
						pass: this.password}, function (data) {
            if (data.success) {
              alert("修改成功！返回重新登录！");
              location.href = '/admin/login';
            } else {
              alert("修改失败！");
            }
          });
        }
      }
    },
    watch: {
      username: function (now) {
        this.emptyName = now === '';
      },
      password: function (now) {
        this.emptyPass = now === '';
        this.eqPass = (now === this.password1);
      },
      password1: function (now) {
        this.eqPass = (now === this.password);
      }
    }
  });
</script>
#include('footer.html')
